<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.modal {
		    display: none;
		    position: fixed;
		    z-index: 1;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%; 
		    overflow: auto;
		    background-color: rgba(0,0,0,0.6);
		}
		.modal-content {
		    display: flex;
		    flex-direction: column;
		    position: relative;
		    background-color: #fefefe;
		    margin: 15% auto;
		    padding: 20px;
		    border: 1px solid #888;
		    width: 80%;
		    animation: topDown 0.4s;
		}
		@keyframes topDown {
		    from {top: -300px; opacity: 0}
		    to {top: 0; opacity: 1}
		}
		.close {
		    color: #aaa;
		    float: right;
		    font-size: 28px;
		    font-weight: bold;
		}
		.close:hover {
		    color: black;
		    text-decoration: none;
		    cursor: pointer;
		}
	</style>
	<body>
		<button id="triggerBtn">模态框</button>
		<!-- 模态框 -->
		<div id="myModal" class="modal">
			<div class="modal-content">
				<span id="closeBtn" class="close">×</span>
				<div class="modal-footer">
					<label>用户名：</label>
					<input type="text" /><br>
					<label>密码：</label>
					<input type="text"/>
				</div>
			</div>
		</div>
		<script>
			(function() {
			var modalBox = {};
			modalBox.modal = document.getElementById("myModal");
			modalBox.triggerBtn = document.getElementById("triggerBtn");
			modalBox.closeBtn = document.getElementById("closeBtn");
			modalBox.show = function() {
				console.log(this.modal);
				this.modal.style.display = "block";
			}
			modalBox.close = function() {
				this.modal.style.display = "none";
			}
			modalBox.outsideClick = function() {
				var modal = this.modal;
				window.onclick = function(event) {
		            if(event.target == modal) {
		            	modal.style.display = "none";
		            }
				}
			}
			modalBox.init = function() {
				var that = this;
				this.triggerBtn.onclick = function() {
		            that.show();
				}
				this.closeBtn.onclick = function() {
					that.close();
				}
				this.outsideClick();
			}
			modalBox.init();
		 
		})();
		</script>
		
	</body>
</html>